<template>
	<view class="mPage">
		<view class="sk-content">

			<view class="top-box">
				<image class="bg" src="/static/shop_list_bg.png" mode="widthFix"></image>
				<uni-nav-bar :leftWidth="1" :leftWidth2="1" :rightWidth="70" statusBar :border="false"
					backgroundColor="transparent">
					<view class="mSearch-box">
						<image src="@/static/ic_search.png" mode="heightFix"></image>
						<text>搜索门店</text>
					</view>
				</uni-nav-bar>

				<view class="top-other-box">
					<text class="title">门店预约系统</text>
					<text class="sub-title">提前预约，不用排队～</text><strong></strong>
				</view>
			</view>
			<view class="open-new-shop-card">
				<image class="card-icon" src="/static/ic_main_shop.png" mode="heightFix"></image>
				<view class="open-new-shop-content">
					<text class="open-shop-title">开通门店预约功能</text>
					<text class="open-btn">立即开通</text>
					<image class="open-btn-icon" src="/static/ic_open_shop_right.png" mode="heightFix"></image>
				</view>
			</view>
			<view class="menu-list-bar">
				<view :class="[selectIndex == 0 ? 'menu-item-active' : 'menu-item']" @click="checkMenuIndex(0)">
					<image v-if="!selectIndex || selectIndex == 0" src="/static/ic_shop_list_menu_ac.png"
						mode="heightFix"></image>
					<image v-else src="/static/ic_shop_list_menu_a.png" mode="heightFix"></image>
					<view class="title-box">
						<text>附近门店</text>
						<view class="selected-line-box">
							<view class="selected-dot" />
							<view class="selected-line" />
						</view>
					</view>
				</view>

				<view :class="[selectIndex == 1 ? 'menu-item-active' : 'menu-item']" @click="checkMenuIndex(1)">
					<image v-if="selectIndex == 1" src="/static/ic_shop_list_menu_bc.png" mode="heightFix"></image>
					<image v-else src="/static/ic_shop_list_menu_b.png" mode="heightFix"></image>
					<view class="title-box">
						<text>我的足迹</text>
						<view class="selected-line-box">
							<view class="selected-dot" />
							<view class="selected-line" />
						</view>
					</view>
				</view>
			</view>

		</view>
		<view class="shop-list">
			<view v-if="!selectIndex || selectIndex == 0" :key="1" v-for="(item, index) in mList" class="shop-item"
				@click="toMain(item)">
				<image class="item-cover" :src="item.thumb" mode="aspectFill"></image>
				<view class="item-content">
					<text class="item-name">{{item.store_name}}</text>
					<view class="item-loction-box">
						<image class="item-icon" src="/static/ic_list_loction.png" mode="widthFix"></image>
						<text class="item-desc">{{item.address}}</text>
					</view>
					<view class="btn-desc-box">
						<view class="item-desc-box">
							<image class="item-icon" src="/static/ic_list_time.png" mode="widthFix"></image>
							<text class="item-desc">{{item.work_time}}</text>
						</view>
						<view class="item-desc-box">
							<image class="item-icon" src="/static/ic_list_yy.png" mode="widthFix"></image>
							<text class="item-desc">{{item.order_cnt}}次预约</text>
						</view>
					</view>
					<view class="btn-view">
						<view class="item-btn"
							@click.stop="actionMenu('map',{latitude:item.lat,longitude:item.lng,name:item.store_name})">
							<image src="/static/ic_list_map.png" mode="aspectFill"></image>
							<text>导航</text>
						</view>
						<view style="border-left: 1rpx solid #EFEFEF;width: 2rpx;height: 25rpx;"></view>
						<view class="item-btn" @click.stop="actionMenu('call',{phoneNumber:item.phone})">
							<image src="/static/ic_list_call.png" mode="aspectFill"></image>
							<text>电话</text>
						</view>

					</view>
				</view>
			</view>


			<view v-else :key="2" v-for="(item, index) in mList" class="shop-item" @click="toMain(item.record)">
				<image class="item-cover" :src="item.record.thumb" mode="aspectFill"></image>
				<view class="item-content">
					<text class="item-name">{{item.record.store_name}}</text>
					<view class="item-loction-box">
						<image class="item-icon" src="/static/ic_list_loction.png" mode="widthFix"></image>
						<text class="item-desc">{{item.record.address}}</text>
					</view>

					<view class="btn-desc-box">
						<view class="item-desc-box">
							<image class="item-icon" src="/static/ic_list_time.png" mode="widthFix"></image>
							<text class="item-desc">{{item.record.work_time}}</text>
						</view>
						<view class="item-desc-box">
							<image class="item-icon" src="/static/ic_list_yy.png" mode="widthFix"></image>
							<text class="item-desc">{{item.record.order_cnt}}次预约</text>
						</view>
					</view>
					<view class="btn-view">
						<view class="item-btn"
							@click.stop="actionMenu('map',{latitude:item.lat,longitude:item.lng,name:item.store_name})">
							<image src="/static/ic_list_map.png" mode="aspectFill"></image>
							<text>导航</text>
						</view>
						<view style="border-left: 1rpx solid #EFEFEF;width: 2rpx;height: 25rpx;"></view>
						<view class="item-btn" @click.stop="actionMenu('call',{phoneNumber:item.phone})">
							<image src="/static/ic_list_call.png" mode="aspectFill"></image>
							<text>电话</text>
						</view>
					</view>
				</view>
			</view>


		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {
		onLoad,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'

	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		getStoreList,
		getStoreHistoryList
	} from '@/api/index.js'

	const selectIndex = ref(0);
	const mList = ref([]);

	const checkMenuIndex = (index) => {
		selectIndex.value = index;
		searchData.page = 1;
		if (selectIndex.value == 1) {
			getStoreHistory();
		} else {
			getData()
		}

	}
	const searchData = reactive({
		page: 1,

	});

	const toMain = (item) => {
		// navigateTo({
		// 	url: `/pages/main/index`
		// })
		uni.setStorageSync("store_sn", item.store_sn);
		uni.switchTab({
			url: `/pages/main/index?store_sn=${item.store_sn}`
		})
	}
	onLoad(() => {
		console.log("进来了");
		searchData.page = 1
		getData()
	});

	onReachBottom(() => {
		searchData.page += 1
		if (selectIndex.value == 1) {
			getStoreHistory();
		} else {
			getData()
		}
	})

	const getData = async () => {
		try {
			let res = await getStoreList(searchData)
			if (res?.code) {
				console.log(res.data);
				console.log("请求成功");
				const tempList = res.data?.list || []
				if (searchData.page == 1) {
					mList.value = []
				}
				mList.value = mList.value.concat(tempList)

				if (!tempList.length) {
					if (searchData.page > 1) {
						searchData.page = searchData.page - 1
					}
				}
			} else {
				if (searchData.page > 1) {
					searchData.page = searchData.page - 1
				}
				console.log("请求失败1");
			}
		} catch (error) {
			console.log(error);
			console.log("请求失败2");
		}

	};


	const getStoreHistory = async () => {
		let res = await getStoreHistoryList(searchData)
		if (res?.code) {
			console.log(res.data);
			const tempList = res.data?.list || []
			if (searchData.page == 1) {
				mList.value = []
			}
			mList.value = mList.value.concat(tempList)

			if (!tempList.length) {
				if (searchData.page > 1) {
					searchData.page = searchData.page - 1
				}
			}
		} else {
			if (searchData.page > 1) {
				searchData.page = searchData.page - 1
			}
		}
	}
	const actionMenu = (type, value) => {
		console.log(value);
		if (type == 'call') {
			uni.makePhoneCall(value);
		} else if (type == 'map') {
			uni.openLocation({
				name: value.name,
				latitude: value.latitude,
				longitude: value.longitude,
				success: function() {
					console.log('success');
				}
			});
		}
	}

	onShareAppMessage((res) => {
		return {
			title: '客满',
			path: '/pages/splash/index'
		}
	})
</script>

<style lang="scss" scoped>
	.mPage {
		width: 100vw;
		display: flex;
		flex-direction: column;

		.sk-content {
			position: sticky;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			display: flex;
			flex-direction: column;
			z-index: 1;
			background-color: #F6F6F8;
		}

		.top-box {
			display: flex;
			height: fit-content;
			min-height: 388rpx;
			flex-direction: column;

			.bg {
				width: 100vw;
				display: block;
				position: absolute;
				z-index: -1;
			}

			.mSearch-box {
				width: 474rpx;
				margin: auto 0;
				height: 62rpx;
				background: rgba(255, 255, 255, 0.8);
				border-radius: 31rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				&:active {
					opacity: 0.7;
				}

				image {
					margin-left: 18rpx;
					width: 26rpx;
					height: 26rpx;
				}

				text {
					margin-left: 14rpx;
					font-size: 24rpx;
					color: #979797;
				}
			}


			.top-other-box {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				margin-left: 65rpx;

				.title {
					font-size: 38rpx;
					color: #0088F1;
					font-weight: bold;
				}

				.sub-title {
					font-size: 24rpx;
					color: #636363;
					margin-top: 20rpx;
					line-height: 33rpx;

				}
			}

		}

		.open-new-shop-card {
			width: 700rpx;
			height: 74rpx;
			background: linear-gradient(128deg, #FFF3CD 0%, #BBE1FF 100%);
			border-radius: 10rpx;
			margin: 20rpx 25rpx 0 25rpx;
			display: flex;
			flex-direction: row;

			&:active {
				opacity: 0.7;
			}

			.card-icon {
				margin-top: 22rpx;
				margin-left: 14rpx;
				width: 36rpx;
				height: 42rpx;
			}

			.open-new-shop-content {
				flex: 1;
				display: flex;
				height: 100%;
				align-items: center;
				flex-direction: row;

				.open-shop-title {
					color: #202020;
					flex: 1;
					font-size: 24rpx;
					font-weight: normal;
					text-align: left;
					white-space: nowrap;
				}

				.open-btn {
					color: #202020;
					font-size: 24rpx;
					font-weight: normal;
					white-space: nowrap;
				}

				.open-btn-icon {
					width: 18rpx;
					height: 18rpx;
					margin-left: 5rpx;
					margin-right: 20rpx;
				}
			}
		}

		.menu-list-bar {
			width: 700rpx;
			margin: 20rpx auto 0 auto;
			display: flex;
			flex-direction: row;

			.menu-item-active {
				flex: 1;
				height: 119rpx;
				background: #FFFFFF;
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				backdrop-filter: blur(10px);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				image {
					width: 42rpx;
					height: 42rpx;
					display: block;
				}

				text {
					margin-left: 4rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #0993FF;
				}

				.selected-line-box {
					display: flex;
					flex-direction: row;
					margin-top: 5rpx;
					align-items: center;
					justify-content: center;

					.selected-dot {
						width: 4rpx;
						height: 4rpx;
						background: #26A1FF;
						border-radius: 74rpx;
					}

					.selected-line {
						margin-left: 2rpx;
						width: 38rpx;
						height: 4rpx;
						background: #26A1FF;
						border-radius: 2rpx;
					}
				}
			}


			.menu-item {
				flex: 1;
				height: 119rpx;
				background: linear-gradient(180deg, #E4F3FF 0%, #FAFAFA 100%);
				border-top-left-radius: 15rpx;
				border-top-right-radius: 15rpx;
				backdrop-filter: blur(10px);
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;

				image {
					width: 42rpx;
					height: 42rpx;
					display: block;
				}

				text {
					margin-left: 4rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #4C4C4C;
				}

				.selected-line-box {
					display: flex;
					flex-direction: row;
					margin-top: 5rpx;
					align-items: center;
					justify-content: center;

					.selected-dot {
						width: 4rpx;
						height: 4rpx;
						background: #26A1FF;
						border-radius: 74rpx;
						opacity: 0;
					}

					.selected-line {
						margin-left: 2rpx;
						width: 38rpx;
						height: 4rpx;
						background: #26A1FF;
						border-radius: 2rpx;
						opacity: 0;
					}
				}
			}

		}

		.shop-list {
			width: 700rpx;
			margin: 0 auto 20rpx auto;
			display: flex;
			flex-direction: column;

			.shop-item {
				width: 100%;
				display: flex;
				flex-direction: row;
				position: relative;
				align-items: center;
				margin-bottom: 20rpx;
				border-radius: 15rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 10rpx 0rpx #EFEFEF;


				&:first-child {
					border-top-right-radius: 0;
					border-top-left-radius: 0;
				}

				&:active {
					opacity: 0.7;
				}

				.item-desc-box {
					margin-top: 6rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
				}

				.item-cover {
					display: block;
					border-radius: 15rpx;
					width: 154rpx;
					height: 154rpx;
					margin: 25rpx 0 25rpx 25rpx;
					overflow: hidden;
				}

				.item-content {
					margin-left: 18rpx;
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.item-icon {
					width: 18rpx;
					height: 18rpx;
					margin-right: 6rpx;
				}

				.btn-view {
					display: flex;
					flex-direction: row;
					align-items: center;
					right: 24rpx;
					position: absolute;
					bottom: 0rpx;
				}

				.btn-desc-box {
					flex: 1;
					display: flex;
					flex-direction: column;
				}

				.item-btn {
					display: flex;
					flex-direction: row;
					min-height: 84rpx;
					align-items: center;
					justify-content: center;
					min-width: 145rpx;

					&:active {
						opacity: 0.7;
					}

					image {
						width: 38rpx;
						height: 38rpx;
					}

					text {
						font-size: 26rpx;
						color: #434343;
						margin-left: 8rpx;
					}
				}

				.item-name {
					font-size: 28rpx;
					color: #151515;
					font-weight: bold;
				}

				.item-loction-box {
					display: flex;
					align-items: center;
					margin-top: 8rpx;
					flex-direction: row;
				}

				.item-desc {
					font-size: 24rpx;
					color: #7A7A7A;
				}
			}
		}
	}
</style>